<!-- 商品列表组件 -->
<template>
 <li>

      <img :src="goodsItem.thumb_url" alt="">
      <h4>{{goodsItem.short_name}}</h4>
      <div class="price">
        <span>￥{{goodsItem.price|price}}</span>
        <span>{{goodsItem.sales_tip}}</span>
        <a href="">找相关</a>
      </div>
</li>
</template>

<script>
export default {
  props: ['goodsItem'],
  data () {
    return {

    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style lang='stylus' scoped>
/* @import url(); 引入css类 */
li
   width 49%
   display  flex
   flex-direction column
   justify-content center
   align-items center
   padding-bottom 5px;
   img
    display block
    width 99%
   h4
    height 27px;
    line-height 27px;
    text-align center
    overflow hidden
    padding 5px 0px;
   .price
    margin-top 15px;
    width 100%
    padding 5px 0px;
    display flex
    flex-direction row
    align-items center
    span:first-child{
     color #e02e24
     font-weight: 500;
     font-size:14px;
     font-weight 800
     padding:0px 4px 0px 2px;
     flex 1
    }
    span{
      color #9c9c9c
      font-weight 500
      font-size 10px;
      flex 2
    }
    a
     color #e02e24
     font-size 12px;
     border 1px solid #e02e24
     padding 4px;
     border-radius 14px;
     text-align center
     line-height 12px;
     flex 1
</style>
